<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .header {
        height: 50px;
        line-height: 50px;
        background-color: #999;
        font-size: 20px;
        color: #fff;
        padding-left: 20px;
      }

      ul li {
        list-style: none;
        height: 125px;
        background-color: #ccc;
        padding: 10px;
        width: 200px;
        margin: 10px;
        border-radius: 5px;
      }

      .name,
      .price,
      .num {
        font-size: 18px;
        font-weight: bolder;
      }

      .opera span {
        width: 30px;
        height: 30px;
        display: inline-block;
        background: #eee;
        line-height: 30px;
        text-align: center;
      }

      .plus,
      .sub {
        cursor: pointer;
        border: 1px solid #666;
      }

      .numChange {
        background-color: #fff;
        width: 30px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="header" class="header">模拟购物车的增删计算</div>
    <div id="content">
      全选<input type="checkbox" class="checkAll" id="checkAll" />
      <ul>
        <!--商品1-->
        <li class="list1">
          <input type="checkbox" class="checkSin" /><br />
          名称: <span class="name">list1</span><br />
          单价: <span class="price">123</span><br />
          数量:
          <div class="opera">
            <span class="plus">+</span>
            <input type="text" class="numChange" value="1" />
            <span class="sub">-</span>
          </div>
        </li>
        <!--商品2-->
        <li class="list2">
          <input type="checkbox" class="checkSin" /><br />
          名称: <span class="name">list2</span><br />
          单价: <span class="price">234</span><br />
          数量:
          <div class="opera">
            <span class="plus">+</span>
            <input type="text" class="numChange" value="2" />
            <span class="sub">-</span>
          </div>
        </li>
        <!--商品3-->
        <li class="list3">
          <input type="checkbox" class="checkSin" /><br />
          名称: <span class="name">list3</span><br />
          单价: <span class="price">345</span><br />
          数量:
          <div class="opera">
            <span class="plus">+</span>
            <input type="text" class="numChange" value="3" />
            <span class="sub">-</span>
          </div>
        </li>
      </ul>
    </div>

    <div id="footer">
      结算 总价钱:
      <span class="allPrice" id="allPrice">0</span> 总数量:
      <span class="allNum" id="allNum">0</span>
      <button class="del" id="del" onclick="del()">删除</button>
    </div>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery-3.3.1.min.js"
    ></script>
    <script type="application/javascript">
      $(function () {
        //全选:当勾选全选按钮,列表中的选项全部选中;反之取消勾选则列表中的选项全部为未选中状态。
        $("#checkAll").on("click", function () {
          if (this.checked) {
            //当前为已选
            $("li>input[type=checkbox]").prop("checked", true);
          } else {
            //当前未选
            $("li>input[type=checkbox]").prop("checked", false);
          }

          calculate();
        });

        //当所有的勾选时，全选变为已勾选状态
        $(".checkSin").on("click", function () {
          var i = 0;
          $(".checkSin").each(function () {
            //如果有一个未选中，则全选未选中,否则选中
            if (this.checked === false) {
              $("#checkAll").prop("checked", false);
            } else {
              // 如果是选中的，累加，和全部长度比较
              i += 1;
              if ($(".checkSin").length === i) {
                $("#checkAll").prop("checked", true);
              }
            }
          });

          calculate();
        });

        //加 +1
        $(".plus").on("click", function () {
          //next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
          $(this)
            .next()
            .val(parseInt($(this).next().val()) + 1);

          calculate();
        });

        //减 -1
        $(".sub").on("click", function () {
          //prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
          $(this)
            .prev()
            .val(parseInt($(this).prev().val()) - 1);
          //判断是否小于1，当小于1，则等于1
          if ($(this).prev().val() <= 1) {
            $(this).prev().val(1);
          }

          calculate();
        });
      });

      //计算函数
      function calculate() {
        //定义总价、总数量的初始值
        var allPrice = 0;
        var allNum = 0;
        $("li").each(function () {
          //计算已经选中的商品的价格
          if ($(this).find(".checkSin")[0].checked === true) {
            //总价 = 单价 * 数量
            allPrice +=
              parseFloat($(this).find(".price").html()) *
              parseInt($(this).find(".numChange").val());
            console.log(allPrice);
            //数量 = 各个商品数量的和
            allNum += parseInt($(this).find(".numChange").val());
            console.log(allNum);
          } else {
            //为选中的价格
            allPrice += 0;
            allNum += 0;
          }
        });

        //将总价和数量显示到HTML上
        $("#allPrice").html(allPrice);
        $("#allNum").html(allNum);
      }

      //删除某项
      function del() {
        $("li").each(function () {
          if ($(this).find(".checkSin")[0].checked === true) {
            $(this).remove();
          }
        });

        calculate();
      }
    </script>
  </body>
</html>
